<template>
    <el-form :model="aliForm" :rules="aliFormRules" :label-width="120">
        <el-form-item label="app_id" prop="app_id">
            <el-input v-model="aliForm.app_id" placeholder="请输入app_id"></el-input>
        </el-form-item>
        <el-form-item prop="ali_public_key" label="ali_public_key">
            <el-input v-model="aliForm.ali_public_key" placeholder="请输入ali_public_key"></el-input>
        </el-form-item>
        <el-form-item prop="private_key" label="private_key">
            <el-input v-model="aliForm.private_key" placeholder="请输入private_key"></el-input>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const aliForm = reactive({
    app_id: '',
    ali_public_key: '',
    private_key: ''
})

const aliFormRules = reactive({
    app_id: [
        {
            required: true,
            message: '请输入appid',
            trigger: 'blur'
        }
    ],
    ali_public_key: [
        {
            required: true,
            message: '请输入ali_public_key',
            trigger: 'blur'
        }
    ],
    private_key: [
        {
            required: true,
            message: '请输入private_key',
            trigger: 'blur'
        }
    ]
})

const setAliConfig = () => {
    message({
        message: "支付宝-配置成功",
        type: "success"
    })
}

defineExpose({
    setAliConfig
})
</script>

<style lang="scss" scoped></style>